import React from 'react';

/**
 * 组件挂载阶段，要执行的钩子函数
 * 1 constructor
 * 2 render
 * 3 componentDidMount
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      count: 0,
    };
    // 为事件处理程序绑定this
    console.log('1. constructor()');
  }

  render() {
    console.log('2. render');
    const h1 = document.getElementById('h1-001');
    console.log('render dom ', h1 && h1.innerText);
    // this.setState({}); 不要在render 中 更新页面
    return (
      <div>
        <h1 id="h1-001">我是H1标签{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击次数
        </button>
        {/* <button onClick={() => this.forceUpdate()}>点击次数</button> */}
      </div>
    );
  }

  componentDidMount() {
    // 发送网络请求
    // DOM操作
    console.log('3. componentDidMount()');
    const h1 = document.getElementById('h1-001');
    console.log(h1);
  }

  componentDidUpdate() {
    console.log('4. componentDidUpdate()');
    const h1 = document.getElementById('h1-001');
    console.log(h1);
  }
}

export default App;
